<template>
	<view class="activity-page">
		<view class="goods" v-for="(item,index) in activityList" :key="index" @click="toDetail(item.id)">
			<view class="goodsinfo">
				<view class="goodsinfo_pic">
					<image :src="item.cover_image" mode="aspectFill" class="pic"></image>
					<u-count-down :timestamp="item.end_time | timestamp" class="count" color="#FFFFFF" bg-color="#FF0000" separator-color="#FFFFFF" :show-days="false"></u-count-down>
				</view>
				<view class="goodsinfo_text">
					<view class="goodsinfo_text_title">{{item.name}}</view>
					<view class="goodsinfo_text_desc">{{item.activity_describe}}</view>
					<view class="goodsinfo_text_price">￥{{item.first_blood}}</view>
					<view class="goodsinfo_text_value">商品价值：{{item.min_price}}~{{item.max_price}}元</view>
				</view>
			</view>
			<view class="goodslist">
				<view class="list">
					<image :src="img" mode="aspectFill" v-for="(img,i) in item.goods_imgs" :key="i"></image>
				</view>
				<view class="join">立即参与</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"activity",
		props:{
			activityList:{
				type:Array,
				default:()=>{
					return []
				}
			}
		},
		data() {
			return {
				current:0
			}
		},
		filters:{
			timestamp(time){
				let curTime = Date.now();
				let timestamp = parseInt((time * 1000 - curTime) / 1000);
				return timestamp;
			}
		},
		methods:{
			toDetail(id){
				uni.navigateTo({
					url:`/pages/index/extractionBlindbox?id=${id}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
view{
	box-sizing: border-box;
}
.activity-page{
	padding: 0 30rpx;
}
.goods{
	background: linear-gradient(0deg, #FFE6DD 5%, #FFDFF2 100%);
	border-radius: 20rpx;
	padding: 30rpx;
	box-sizing: border-box;
	margin-bottom: 26rpx;
	
	.goodsinfo{
		@include between;
		
		&_pic{
			position: relative;
			
			.pic{
				width: 280rpx;
				height: 280rpx;
				border-radius: 16rpx;
			}
			.count{
				width: 280rpx;
				height: 60rpx;
				border-radius: 0 0 20rpx 20rpx;
				color: #FFFFFF;
				@include center;
				position: absolute;
				bottom: 0rpx;
				background-color: #FF0000;
			}
		}

		&_text{
			width: 300rpx;
			height: 280rpx;
			@include column-start;
			
			&_title{
				width: 300rpx;
				font-size: 30rpx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				color: #333333;
				@include one;
				margin-bottom: 30rpx;
			}
			&_desc{
				width: 300rpx;
				height: 32rpx;
				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #666666;
				@include one;
				margin-bottom: 50rpx;
			}
			&_price{
				width: 300rpx;
				font-size: 40rpx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				color: #FF0000;
				@include one;
				margin-bottom: 30rpx;
			}
			&_value{
				width: 300rpx;
				height: 40rpx;
				background-color: #F99D7D;
				border-radius: 20rpx;
				padding: 4rpx 18rpx;
				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #FFFFFF;
				@include one;
			}
		}
	}
	.goodslist{
		width: 630rpx;
		height: 100rpx;
		background: linear-gradient(90deg, #FFADBC 0%, #FFFFFF 100%);
		border-radius: 10rpx;
		padding: 15rpx 16rpx;
		box-sizing: border-box;
		margin-top: 16rpx;
		@include between;
		
		.list{
			width: 414rpx;
			height: 70rpx;
			@include between;
			
			image{
				width: 70rpx;
				height: 70rpx;
				border-radius: 10rpx;
			}
		}
		.join{
			width: 160rpx;
			height: 70rpx;
			background: linear-gradient(0deg, #FF6508 0%, #FF8585 100%);
			border-radius: 10rpx;
			@include center;
			font-size: 28rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #FFFFFF;
		}
	}
}
</style>
